<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted, computed } from 'vue'
import { getExpressService } from '@/api/medicine'
import type { Express } from '@/types/medicine'
import dayjs from 'dayjs'
import endImg from '@/assets/end.png'
import startImg from '@/assets/start.png'
import carImg from '@/assets/car.png'
import overImg from '@/assets/over.png'

// 引入高德地图 jsAPI Loader
import AMapLoader from '@amap/amap-jsapi-loader'

const router = useRouter()
const route = useRoute()
const goBack = () => {
  router.back()
}
// 查询物流信息
const express = ref<Express>()
const getExpressInfo = async () => {
  const res = await getExpressService(route.params.id as string)
  express.value = res
}
// 预计送达时间转化
const estimatedTime = computed(() => {
  if (dayjs().isAfter(express.value?.estimatedTime))
    return dayjs(express.value?.estimatedTime).format('M月DD日')
  const diff = dayjs().diff(express.value?.estimatedTime, 'day')
  switch (diff) {
    case 0:
      return '今天'
    case 1:
      return '明天'
    case 2:
      return '后天'
    default:
      return dayjs(express.value?.estimatedTime).format('M月DD日') || '未知'
  }
})

/* 高德地图使用 */
// v2.0 需要配置安全密钥jscode  高德地图会在加载资源时校验安全密钥jscode
window._AMapSecurityConfig = {
  securityJsCode: 'd94ced4dbe3d847112230142f29a109a',
}

onMounted(async () => {
  // 获取物流详情信息
  await getExpressInfo()

  // 组件初始化时加载高德地图需要的资源

  /* 方法一. 通过then回调 */
  // AMapLoader.load({
  //   key: '100a93a92736be25a21c5371862d734b', // 申请好的Web端开发者Key，首次调用 load 时必填
  //   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  // }).then((AMap) => {
  //   const app = new AMap.Map('map', {
  //     //设置地图容器id
  //     zoom: 12, //初始化地图级别
  //     mapStyle: 'amap://styles/whitesmoke', // 设置地图样式
  //   })
  // })

  /* 方法二. 通过async/await */
  const AMap = await AMapLoader.load({
    key: '100a93a92736be25a21c5371862d734b', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
  // 1. 使用AMap初始化地图 =》 创建地图
  const map = new AMap.Map('map', {
    zoom: 12, //初始化地图层级,值越小地图显示的范围越大，值越大显示的信息越详细
    // center: [116.442581, 39.882498], // 初始化地图中心点
    mapStyle: 'amap://styles/whitesmoke', // 设置地图样式
  })
  // 2. 绘制物流轨迹
  AMap.plugin('AMap.Driving', () => {
    // 异步加载插件
    // 构建路线导航类
    const driving = new AMap.Driving({
      map: map, // 指定轨迹显示地图实例
      showTraffic: false, // 关闭实时交通状况
      hideMarkers: true, // 关闭默认轨迹图标
    })

    // 第一个是起始坐标，第二个是终点坐标， 第三个是路途中的经纬度坐标， 第四个规划好了的回调函数
    // 1. 使用经纬度数组中的第一个数据：起始坐标
    const start = express.value?.logisticsInfo.shift()
    // 2. 使用经纬度数组中的最后一个数据：结束坐标
    const end = express.value?.logisticsInfo.pop()
    // 3. 途径点坐标：express.value?.logisticsInfo shift和pop后剩余未途经点坐标，处理成二维数据
    const road = express.value?.logisticsInfo.map((item) => [item.longitude, item.latitude])

    driving.search(
      [start?.longitude, start?.latitude],
      [end?.longitude, end?.latitude],
      {
        waypoints: road, // 显示途经点坐标(二维数组)：waypoints:[[lng,lat],[lng,lat],...]
      },
      function (status: string, result: object) {
        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
        //查询成功时，result 即为对应的驾车导航信息,即未出错时，result即是对应的路线规划方案
        console.log(status, result)
      },
    )

    // 3. 自定义开始结束图标
    // 自定义开始结束位置图片
    const startMarker = new AMap.Marker({
      icon: startImg, // 设置自定义图片
      position: [start?.longitude, start?.latitude],
      offset: [-13, -30],
    })
    map.add(startMarker)
    const endMarker = new AMap.Marker({
      icon: endImg,
      position: [end?.longitude, end?.latitude],
      offset: [-13, -30],
    })
    map.add(endMarker)
    // 4. 当前位置
    const currentMarker = new AMap.Marker({
      icon: carImg,
      position: [
        express.value?.currentLocationInfo?.longitude,
        express.value?.currentLocationInfo?.latitude,
      ], // 图片显示的坐标位置
      map,
      offset: [-13, -30],
    })
    // 5. 途径位置
    road?.forEach((element) => {
      if (
        element[0] === express.value?.currentLocationInfo.longitude &&
        element[1] === express.value.currentLocationInfo.latitude
      )
        return

      const overMarker = new AMap.Marker({
        icon: overImg,
        position: element, // 图片显示的坐标位置
        offset: [-16, -30], //相对于基点的偏移位置
        map,
      })
      map.add(overMarker)
    })
  })
})
</script>

<template>
  <div class="order-logistics-page">
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="goBack" />
        <span>{{ express?.statusValue || '物流状态' }}</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">订单{{ express?.statusValue }} 预计{{ estimatedTime }}送达</p>
        <p class="predict">
          <span>{{ express?.name }}</span>
          <span>{{ express?.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="i in express?.list || []" :key="i.id">
          <p class="status">{{ i.statusValue }}</p>
          <p class="content">{{ i.content }}</p>
          <p class="time">{{ i.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
